<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="yes" name="apple-mobile-web-app-capable" />
            <meta content="yes" name="apple-touch-fullscreen" />
            <meta content="telephone=no,email=no" name="format-detection" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
                <title>测试页面</title>
                </head>
    <body>
        
        <button onclick="showMessage()">JS Call OC</button>
        <button onclick="showShareContent('是时候该分享了')">showShareContent()</button>
        <p id="show-share">此处展示OC传过来的内容(点击右上角分享按钮即可)</p>
        <input type="button" value="Alert" onclick="alert('Alert来了');"/>
        <input type="button" value="Confirm" onclick="confirm();"/>
        <input type="button" value="TextInput" onclick="prompt('提示','占位符');"/>
    </body>
    <script>
        //JS Call OC
        function showMessage(){
            // ❤️❤️❤️window.webkit.messageHandlers.方法名.postMessage(参数);
            // 注意：参数不能为空，有且只有一个参数，如不传参数写postMessage(null)
            //kf 为我们注入JS的对象
            /*
             // 传null
             window.webkit.messageHandlers.kf.postMessage(null);
             // 传字典
             window.webkit.messageHandlers.kf.postMessage({name:'小明',gender:'男'});
             // 传字符串
             window.webkit.messageHandlers.kf.postMessage('hello');
             // 传数组
             window.webkit.messageHandlers.kf.postMessage(['小明','小华','小亮']);
             */
            //method 方法名
            //params 参数
            //callback 回调
            window.webkit.messageHandlers.kf.postMessage(JSON.stringify({method:'showMessage',params:'Please call me Steven',callback:''}));
        }
    //OC Call JS
    function getShareLink(params){
        if (params == null){
            alert('Objective-C call js to show alert');
        }else {
            document.getElementById('show-share').innerHTML
            = params;
            alert(params);
        }
    }
    function showShareContent(content) {
        if (content == null){
            alert('showShareContent');
        }else {
            alert(content);
        }
    }
    </script>
</html>
